<template>
  <view class="container">
    <slot></slot>
    <view class="right">
      <view
        class="img-container"
        v-if="isImg"
        :style="{ width: imgSize || defaultImgSize, height: imgSize || defaultImgSize }"
      >
        <image :src="value" class="img" />
      </view>
      <span v-else class="right-value">{{ value }}</span>
      <image src="./svg/right.svg" :style="{ width: rightIconSize, height: rightIconSize, marginLeft: '10rpx' }" />
    </view>
  </view>
</template>

<script setup lang="ts">
interface Props {
  value: string | number
  isImg?: boolean
  imgSize?: string
  rightIconSize?: string
  valueColor?: string
  fontSize?: string
}
withDefaults(defineProps<Props>(), {
  rightIconSize: '30rpx',
  valueColor: '#979797',
  fontSize: '30rpx',
  isImg: false
})

// == style vars ==
const containerHeightValue = 80
const containerHeight = `${containerHeightValue}rpx`

const defaultImgSize = `${containerHeightValue * 0.75}rpx`
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  height: v-bind(containerHeight);
  font-size: v-bind(fontSize);
  border-bottom: 1rpx solid #f5f5f5;

  .right {
    display: flex;
    align-items: center;

    .img-container {
      display: inline-block;
      overflow: hidden;
      border-radius: 50%;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .right-value {
      height: v-bind(containerHeight);
      line-height: v-bind(containerHeight);
      color: v-bind(valueColor);
    }
  }
}
</style>
